import React, {useEffect, useState} from 'react';
import {Button, Form, Input, InputNumber, message, Modal, Select, Space} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import {roleList} from "@/pages/constant";
import UploadBanner from "@/cms/UploadBanner";

function UseAddEdit({queryList}) {
    const [open,setOpen] = useState(false),
        [loading,setLoading] = useState(false),
        [form] = Form.useForm();
    function onCancel(){
        setOpen(false)
    }
    useEffect(()=>{
        if (open === false){
            form.resetFields();
        }else if(open.ID){
            form.setFieldsValue({
                ...open,
            })
        }else{
            form.setFieldsValue({
                phone_list:[{}]
            })
        }
    },[open])
    function onOk(){
        form.validateFields().then(values => {
            if (open.ID){
                values.ID=open.ID
            }
            ax.post("/api/addUser",{
                ...values,
                avatar:values.avatar.map(item=>({url:item.url||item.response.message}))
            }).then(res=>{
                message.success(res.msg);
                queryList();
                onCancel();
            })
        })
    }
    return {
        setOpen,
        ModalDOM:<Modal
            title={open?.ID?"查看":"添加"}
            open={open}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={loading}
            width={800}
            footer={null}
        >
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
            >
                <Form.Item
                    label={"姓名"}
                    name={"realName"}
                    rules={[
                        {
                            required: true,
                            message: '请输入姓名!',
                        },
                    ]}
                >
                    <Input placeholder={"请输入"} disabled={open.ID}/>
                </Form.Item>
                <Form.Item
                    label={"手机号"}
                    name={"phone"}
                    rules={[
                        {
                            required: true,
                            message: '请输入手机号!',
                        },
                    ]}
                >
                    <Input placeholder={"请输入"}/>
                </Form.Item>
                <Form.Item
                    label={"员工类型"}
                    name={"role"}
                    rules={[
                        {
                            required: true,
                            message: '请选择员工类型!',
                        },
                    ]}
                >
                    <Select placeholder={"请选择"} options={roleList} />
                </Form.Item>
                <Form.Item
                    label={"单价"}
                    name={"price"}
                >
                    <InputNumber style={{width:"100%"}} placeholder={"一小时费用"}/>
                </Form.Item>
                <Form.Item
                    label={"员工肖像"}
                    name={"avatar"}
                >
                    <UploadBanner />
                </Form.Item>
            </Form>
        </Modal>
    }
}

export default UseAddEdit;